<template>
  <el-dialog v-model="model" width="800px" title="缴费明细">
    <el-form :model="queryParams" ref="queryRef" size="small">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="年份" prop="year">
            <el-input
              v-model="queryParams.year"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账单项" prop="type">
            <el-select
              v-model="queryParams.type"
              placeholder="请选择"
              clearable
            >
              <el-option label="物业费" :value="0" />
              <el-option label="车位管理费" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="缴纳状态" prop="payStatus">
            <el-select
              v-model="queryParams.payStatus"
              placeholder="请选择"
              clearable
            >
              <el-option label="未缴纳" :value="0" />
              <el-option label="已缴纳" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="info-c mb-4">
      <el-descriptions border>
        <el-descriptions-item label="小区">
          <span class="text-[12px]">{{ row.communityName }}</span>
        </el-descriptions-item>

        <el-descriptions-item label="房屋">
          <span class="text-[12px]" v-if="row.floorName">
            {{ row.floorName }}
          </span>
          <span class="text-[12px]" v-if="row.unitNum">
            {{ row.unitNum + "单元" }}
          </span>
          <span class="text-[12px]">{{ row.roomNum }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="人员">
          <div class="text-[12px]">
            <template v-if="memberInfo">
              <span>{{ memberInfo.realName }}（业主）</span>
              <span>{{ memberInfo.phone }}</span>
            </template>
            <div v-else>暂未绑定业主</div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="车位信息">
          <div class="flex gap-2">
            <el-tag v-for="item in carInfo || []" :key="item.id"
              >车位号：{{ item.parkingNumber }}</el-tag
            >
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="total-row">
      <div>
        <div class="label">应收总额（元）</div>
        <div class="value">{{ Number(amount).toFixed(2) }}</div>
      </div>
      <div>
        <div class="label">实收总额（元）</div>
        <div class="value">{{ Number(paidAmount).toFixed(2) }}</div>
      </div>
      <div>
        <div class="label">未收总额（元）</div>
        <div class="value">{{ Number(unpaidAmount).toFixed(2) }}</div>
      </div>
    </div>

    <el-table :data="billList">
      <el-table-column label="年份" align="center" prop="year" />
      <el-table-column label="月份" align="center" prop="month" />
      <el-table-column label="类型" align="center" prop="type">
        <template #default="scope">
          {{ scope.row.type === 0 ? "物业费" : "车位管理费" }}
        </template>
      </el-table-column>
      <el-table-column label="应收(元)" align="center" prop="amount" />

      <el-table-column label="支付状态" align="center" prop="payStatus">
        <template #default="scope">
          <el-tag :type="scope.row.payStatus === 0 ? 'danger' : 'success'">
            {{ scope.row.payStatus === 0 ? "未缴费" : "已缴费" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            v-if="scope.row.payStatus === 0"
            type="primary"
            link
            @click="payPropertyBillHandle(scope.row)"
            >线下缴费</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 翻页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      layout="total, prev, pager, next, jumper"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script setup name="PropertyBill">
import { ref, getCurrentInstance } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  getPropertyBillPage,
  updatePropertyBill,
  getPropertyBillSummary,
} from "@/api/feeManage";
import {
  getCommunityMemberPage,
  getParkingSpacePage,
} from "@/api/realEstateManage";

const props = defineProps({
  row: {
    type: Object,
    required: true,
  },
});
const { proxy } = getCurrentInstance();
const billList = ref([]);
const loading = ref(true);
const total = ref(0);

const model = defineModel({
  type: Boolean,
  default: false,
});

const queryParams = ref({
  pageNo: 1,
  pageSize: 12,
  roomId: "",
  year: "",
  month: "",
  type: "",
  payStatus: "",
});

// 业主信息
const memberInfo = ref({});
// 车位信息
const carInfo = ref([]);

const getMemberInfo = () => {
  getCommunityMemberPage({
    roomId: props.row.id,
    type: 0,
    pageNo: 1,
    pageSize: 1,
  }).then(({ data }) => {
    memberInfo.value = data.records[0];
    console.log("[  memberInfo.value ] >", memberInfo.value);
  });
};
const getCarInfo = () => {
  getParkingSpacePage({
    roomId: props.row.id,
    pageNo: 1,
    pageSize: 1,
  }).then(({ data }) => {
    carInfo.value = data.records;
    console.log("[  carInfo.value ] >", carInfo.value);
  });
};
getMemberInfo();
getCarInfo();

// 应收金额
const amount = ref(0);
// 实收金额
const paidAmount = ref(0);
// 未收金额
const unpaidAmount = ref(0);
/** 查询账单列表 */
function getList() {
  loading.value = true;
  getPropertyBillPage({ ...queryParams.value, roomId: props.row.id }).then(
    ({ data }) => {
      billList.value = data.records;
      total.value = data.total;
      loading.value = false;
    }
  );
  getPropertyBillSummary({ ...queryParams.value, roomId: props.row.id }).then(
    ({ data }) => {
      amount.value = data.totalAmountReceivable;
      unpaidAmount.value = data.totalNotPayAmount;
      paidAmount.value = data.totalPayAmount;
    }
  );
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 编辑按钮操作 */
function handleEdit(row) {}

getList();

const payPropertyBillHandle = (row) => {
  ElMessageBox.confirm("确定已经线下缴费？").then(() => {
    updatePropertyBill({
      id: row.id,
    }).then(({ data }) => {
      if (data) {
        ElMessage.success("缴费成功");
        getList();
      } else {
        ElMessage.error("缴费失败");
      }
    });
  });
};
</script>

<style scoped lang="scss">
.info-c {
  font-size: 14px;
  color: #333;
}
.total-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 4px 12px;
  font-size: 12px;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  & > div {
    min-width: 20%;
    .label {
      color: #666;
    }
    .value {
      color: red;
    }
  }
  background-color: #f8f8f8;
}
</style>
<style lang="scss">
.el-dialog__header {
  margin-bottom: 0px !important;
}
</style>
